<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <!-- 引入 ECharts 库 -->
    <script src="../libs/echarts.min.js"></script>

</head>
<body>
    <!-- 创建一个用于存放图表的容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            // legend: {
            //     textStyle: {
            //         color: '#fff' // 图例文字颜色
            //     },
            //     top: '1%', // 图例位置，距离顶部1%
            //     right: 'center', // 图例居中对齐
            //     orient: 'vertical', // 垂直布局
            //     height: '2%',
            //     itemGap: 5 // 设置图例项之间的间距
            // },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgb(253,253,253)'
                    },
                    onZero: false, // 轴线是否在0上
                },
                data: ['H', 'A', 'B', 'C']
            },
            yAxis: {
                type: 'value',
                // axisTick: {show: false},
                // splitNumber: 4,
                min: -20,
                

            },
            series: [
             
                {
                    name: '问题总数',
                    type: 'bar',
                    // stack: 'A', // A项点堆叠
                    barWidth:'50%',
                    data: [0, 50, 7, 0],
                    itemStyle: {
                        color: function(params) {
                            console.log(params)
                            if(params.name=='H'){
                                //H  : 大于0 时红色；==0 绿色  ；
                                if (params.data <= 0) {
                                    return 'green';
                                } else {
                                    return 'red';
                                }
                            }else if(params.name=='A'){
                                // A： 堆叠的柱子   上面是红色（有问题）、下面的黄色（没问题）
                                if (params.data) {
                                    return 'yellow';
                                }

                            }else if(params.name=='B'){
                                if (params.data <= 0) {
                                    return 'green';
                                } else {
                                    return 'yellow';
                                }
                            }else if(params.name=='C'){
                                if (params.data <= 0) {
                                    return 'green';
                                } else {
                                    return 'yellow';
                                }
                            }

                            
                        }
                    }
                },
                {
                    name: '不可控数量',
                    type: 'bar',
                    // stack: 'A', // A项点堆叠
                    // barGap:'0%',
                    // barCategoryGap:'0%',

                    barWidth:'50%',
                    data: [null, 30, null, null],
                    itemStyle: {
                        color: function(params) {
                            if(params.name=='H'){
                                return '';
                            }else if(params.name=='A'){
                                // A： 堆叠的柱子   上面是红色（有问题）、下面的黄色（没问题）
                                if (params.data) {
                                    return 'red';
                                }

                            }else if(params.name=='B'){
                                return 'blue';
                            }else if(params.name=='C'){
                                return 'blue';
                            }
                        }
                    }
                },
               
                
            ]
        
        
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>
